<script setup>
import { ref } from 'vue'
import { addChannelsAPI, editChannelsAPI } from '@/api/article.js'

// 声名一个 数据 用来回显
const formModel = ref({
  id: '',
  cate_name: '',
  cate_alias: ''
})
// 声名一个 formRef 绑定 form 表单 Dom
const formRef = ref(null)
// 声名一个 emit
const emit = defineEmits(['refresh'])

// 规则校验
const rules = {
  cate_name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
  cate_alias: [{ required: true, message: '请输入分类别名', trigger: 'blur' }]
}
// 封装一个 dialog 开关
const dialogVisible = ref(false)
const open = (row) => {
  dialogVisible.value = true
  formModel.value = row
}

// 确认按钮
const onSubmit = async () => {
  // 表单校验
  await formRef.value.validate()
  // 判断 是添加还是编辑
  if (formModel.value.id) {
    // 编辑 发送请求
    await editChannelsAPI(formModel.value)
    // 提示用户
    ElMessage.success('更新分类信息成功！')
  } else {
    // 添加 发送求情
    await addChannelsAPI(formModel.value)
    // 提示用户
    ElMessage.success('新增文章分类成功！')
  }

  // 关闭对话框
  dialogVisible.value = false
  // 通知父组件 重新拉取数据
  emit('refresh')
}

// 对外暴露 opne 方法
defineExpose({ open })
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="formModel.id ? '编辑分类' : '添加分类'"
    width="500"
  >
    <el-form :model="formModel" :rules="rules" ref="formRef">
      <el-form-item label="分类名称" prop="cate_name">
        <el-input v-model="formModel.cate_name" placeholder="请输入分类名称" />
      </el-form-item>
      <el-form-item label="分类别名" prop="cate_alias">
        <el-input v-model="formModel.cate_alias" placeholder="请输入分类别名" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
